<template>
	<div class="container">
		<div class="index-content">
      <div class="index-title">
        欢迎来到，云途养护
      </div>
      <div class="item-content">
        <div class="title">
          昨日APP数据
          <div class="add-new">
            <el-button class="jx-btn" :type="boo.isbut ? '' : 'primary'" @click="changeRow(1)">客户端</el-button>
            <el-button class="jx-btn" :type="boo.isbut ? 'primary' : ''" @click="changeRow(2)">服务端</el-button>
          </div>
        </div>
        <div class="list-content">
          <div class="list-data">
            <span class="bg">打开用户数</span>
            <span>{{data.zrappsjs.openUserCount || '--'}}</span>
          </div>
          <div class="list-data">
            <span class="bg">打开次数</span>
            <span>{{data.zrappsjs.openCount || '--'}}</span>
          </div>
          <div class="list-data">
            <span class="bg">打开时长</span>
            <span>{{data.zrappsjs.openDurationH || '--'}}<em>小时</em></span>
          </div>
          <div class="list-data">
            <span class="bg">成交订单数</span>
            <span>{{data.zrappsjs.orderCount || '--'}}</span>
          </div>
          <div class="list-data">
            <span class="bg">成交金额</span>
            <span>{{data.zrappsjs.orderSum || '--'}}</span>
          </div>
          <div class="list-data">
            <span class="bg">订单转化率</span>
            <span>{{data.zrappsjs.orderInversionRate || '--'}}%</span>
          </div>
        </div>
      </div>
      <div class="item-content">
        <div class="title">
          待跟踪事项
        </div>
        <div class="list-content">
          <div class="list-matter">
            <span>保险即将到期<span class="bold">{{data.insuranceAboutToExpireCount || '--'}}</span></span>
            <span>超过24小时未发货<span class="bold">{{data.notDeliver24HCount || '--'}}</span></span>
          </div>
          <div class="list-matter">
            <span>服务单即将到期<span class="bold">{{data.serviceAboutToExpireCount || '--'}}</span></span>
          </div>
        </div>
      </div>
      <div class="item-content">
        <div class="title">
          当前进行中的活动
        </div>
        <div class="list-content">
          <div class="list-active">
            <div class="jx-table">
              <el-table :data="data.dqjxzdhds" style="width: 100%" v-loading="boo.loading">
                <el-table-column prop="activityTitle" label="活动名称" width="220" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="activityBeginAt" label="开始时间" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="activityEndAt" label="结束时间" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="activityAMO" label="成交金额" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="activityVOL" label="成交笔数" align="center" width="90">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: this.$api.common.data,
        boo: {
          loading: false,
          isbut: false,
        },
        data: '',
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.data = res.retObject
            _self.data.zrappsjs = res.retObject.zrappsjs[0]
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https, {}, success) 
      },
      changeRow(type){
        let _self = this
        let params = {
          type: type
        }
        if(type == 1){
          _self.isbut = false
          _self.data.zrappsjs = _self.data.zrappsjs[0]
        }else {
          _self.isbut = true
          _self.data.zrappsjs = _self.data.zrappsjs[1]
        }
        console.log( _self.data.zrappsjs)
      }
    }
	}

</script>
<style scoped lang="sass">
  .index-content 
    padding: 10px
    .index-title 
      border-left: 3px solid #ff6600
      padding-left: 10px
      line-height: 1
    .item-content
      margin: 45px auto 0
      .title 
        font-size: 16px
        font-weight: 600
        padding-bottom: 20px
        .add-new
          float: right
          text-align: center
          &::before 
            content: ''
            display: block
            clear: both
      .list-data
        display: inline-block
        margin-right: 20px
        height: 75px
        line-height: 75px
        margin-bottom: 20px
        &::before 
            content: ''
            display: block
            clear: both
        .bg  
          background: #e3f4ff
          border: 1px solid #e3f4ff
          font-size: 16px
          font-weight: 500
        span 
          float: left
          background: #fff
          border: 1px solid #f2f2f2
          display: inline-block
          padding: 0 20px
          text-align: center
          font-size: 25px
          font-weight: 600
          em 
            font-style: normal
            font-weight: 500
      .list-matter
        margin-bottom: 20px
        padding-left: 30px
        span
          margin-right: 80px
        .bold
          margin-left: 20px
          font-weight: 600
          font-size: 19px
      .list-active
        width: 75%
        margin-left: 20px
        border: 1px solid #f2f2f2
        padding: 15px
        box-shadow: 0 0 15px #f2f2f2
        .jx-table
          padding: 0
</style>
